<template>
    <div class="home" @contextmenu.prevent="false" @click="globalClick">
        <!-- 桌面 -->
        <div class="desktop">
            <shortcut v-for="shortcut in shortcutArray" :key="shortcut.name" :shortcut="shortcut" @contextmenu.prevent="openMenu($event, shortcut.id)"></shortcut>
        </div>
        <!-- 任务栏组件 -->
        <task-bar class="task-bar" />
        <!-- 窗口组件 -->
        <web-window
            v-for="window in windowArray"
            :id="window.id"
            :key="window.id"
            v-dragMove="{ dragArea: '.header' }"
            v-dragSize="{ dragArea: '.background', dragAreaWidth: 6, resizeArea: '.body' }"
            class="window"
            :window="window"
            @reset-position="resetPosition"
        />
        <div v-show="isShowMenu" class="menu" :style="{ left: menuLeft, top: menuTop }">
            <div class="menu-item" @click="removeApp">删除应用</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import TaskBar from '@/components/TaskBar.vue';
import Shortcut from '@/components/Shortcut.vue';
import WebWindow from '@/components/WebWindow.vue';
import { useShortcutStore } from '@/store/shortcut';
import { useWindowStore } from '@/store/window';
import { reactive, toRefs } from 'vue';

// 创建store对象
const shortcutStore = useShortcutStore();
const windowStore = useWindowStore();

const data = reactive({
    // 快捷方式数组
    shortcutArray: shortcutStore.shortcutArray,
    // 窗口数组
    windowArray: windowStore.windowArray,
    // 窗口最大化前的定位值
    beforeMaxPositionMap: new Map<
        string,
        {
            top: string;
            left: string;
        }
    >(),
    // 是否显示右键菜单
    isShowMenu: false,
    // 右键菜单定位
    menuLeft: '0px',
    menuTop: '0px',
    // 右键菜单关联id
    menuId: '',
});
const { shortcutArray, windowArray, isShowMenu, menuLeft, menuTop } = toRefs(data);

// 快捷方式测试数据
if (data.shortcutArray.length === 0) {
    shortcutStore.push({
        id: '1',
        icon: 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web//static/favicons/favicon-32x32.png',
        name: '稀土掘金',
        url: 'https://juejin.cn/?utm_source=gold_browser_extension',
    });
}

// 重置窗口定位
const resetPosition = function (id: string, isMax: boolean) {
    const windowElement = document.getElementById(id);
    if (windowElement) {
        if (isMax) {
            data.beforeMaxPositionMap.set(id, {
                top: windowElement.style.top,
                left: windowElement.style.left,
            });
            windowElement.style.top = '0';
            windowElement.style.left = '0';
        } else {
            // 从全屏还原，默认居中
            windowElement.style.top = data.beforeMaxPositionMap.get(id)?.top ?? '0';
            windowElement.style.left = data.beforeMaxPositionMap.get(id)?.left ?? '0';
        }
    }
};

// 全局单击
const globalClick = () => {
    // 隐藏右键菜单
    data.isShowMenu = false;
};

// 右击
const openMenu = (e: PointerEvent, id: string) => {
    // 记录当前操作快捷方式id
    data.menuId = id;
    // 获取鼠标指针相对位置
    data.menuLeft = e.clientX + 'px';
    data.menuTop = e.clientY + 'px';
    data.isShowMenu = true;
};

// 删除应用
const removeApp = () => {
    shortcutStore.remove(data.menuId);
};
</script>

<style scoped lang="less">
.home {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: url('../assets/background/bg1.jpg');
    background-size: 100% 100%; // 壁纸拉伸布满
    background-position: center;
    position: relative;

    .desktop {
        height: calc(100vh - 40px);
        overflow-x: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    // 桌面滚动条样式
    .desktop::-webkit-scrollbar {
        height: 10px;
    }

    .desktop::-webkit-scrollbar-track {
        background-color: @dps-color-light-gray-50;
    }

    .desktop::-webkit-scrollbar-thumb {
        background-color: @dps-color-gray-50;
    }

    .desktop::-webkit-scrollbar-thumb:hover {
        background-color: @dps-color-gray-70;
    }

    .desktop::-webkit-scrollbar-thumb:active {
        background-color: @dps-color-gray;
    }

    .task-bar {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 88888888;
    }

    .window {
        position: absolute;
        // 使用这种写法居中，使得拖拽和改变大小逻辑简单
        left: calc(50% - 400px);
        top: calc(50% - 300px - 40px);
    }

    .menu {
        width: 80px;
        background-color: @dps-color-white;
        position: absolute;
        z-index: 88888888;
        padding: 5px;

        .menu-item {
            padding: 5px;
            text-align: center;
            font-size: @dps-font-size-sm;
            transition: all 100ms;
        }

        .menu-item:hover {
            background-color: @dps-color-light-gray-30;
        }
    }
}
</style>
